import React, { useEffect, useState } from "react";
import { _getMySellerTj } from "./service";
import { Card, Table, Row, Col, Divider, DatePicker, Button } from 'antd';
import { LeftOutlined } from '@ant-design/icons';
import moment from "moment";
import zh_CN from 'antd/es/locale/zh_CN';
import {ConfigProvider} from 'antd';
import 'moment/locale/zh-cn'
moment.locale('zh-cn')

const { RangePicker } = DatePicker;
const Home: React.FC = () => {
  const [datasource, setDatasource] = useState<any>();
  const [tongjisource, setTongjisource] = useState<{ order_count, oil_num, money }>();
  const [datePicker, setDatePicker] = useState<boolean>(false);
  const getFullDate = (targetDate) => {
    var D, y, m, d;
    if (targetDate) {
      D = new Date(targetDate);
      y = D.getFullYear();
      m = D.getMonth() + 1;
      d = D.getDate();
    } else {
      y = fullYear;
      m = month;
      // d = date;
    }
    m = m > 9 ? m : '0' + m;
    d = d > 9 ? d : '0' + d;
    return y + '-' + m + '-' + d;
  };
  var nowDate = new Date();
  var fullYear = nowDate.getFullYear();
  var month = nowDate.getMonth() + 1; // getMonth 方法返回 0-11，代表1-12月
  var endOfMonth = new Date(fullYear, month, 0).getDate(); // 获取本月最后一天
  var endDate = getFullDate(nowDate.setDate(endOfMonth));//当月最后一天
  var startDate = getFullDate(nowDate.setDate(1));
  //精准时间
  const [dataTime, setDataTime] = useState<any>([startDate, endDate]);
  //只传月份
  const [dataMonth, setDataMonth] = useState<any>();

    
  useEffect(() => {
    console.log()
    const fetchData = async () => {
      await _getMySellerTj({
        bdate: dataTime[0] === null ? '' : dataTime[0],
        edate: dataTime[1] === null ? '' : dataTime[1],
        month: dataMonth === null ? '':dataMonth,
      }).then((dataRes) => {
        dataRes.data.code === 200 && setDatasource(dataRes.data.data.list)
        dataRes.data.code === 200 && setTongjisource(dataRes.data.data.tongji)
      })
    }

    fetchData()
  }, [dataTime,dataMonth])

  const columns = [
    {
      title: '企业名称',
      dataIndex: 'company_name',
      key: 'company_name',
    },
    {
      title: '油品信息',
      dataIndex: 'order_oil_depot_name',
      key: 'order_oil_depot_name',
      render: (_, rowData) => {
        return `【${rowData.oil_depot_name}】 ${rowData.oil_name} ${rowData.oil_type}`
      }
    },
    {
      title: '购买吨数',
      key: 'oil_num',
      dataIndex: 'oil_num',
    },
    {
      title: '购买金额(元)',
      key: 'total_price',
      dataIndex: 'total_price',
    },

  ];

  return (
    <>
      <div className="header">
        <a className="goback" onClick={() => { window.history.back() }} ><LeftOutlined /></a>
        <div className="header-title">
          我的业绩统计
          <Button onClick={() => {
            setDatePicker(true)
          }} style={{ marginLeft: 5 }} danger>{dataMonth===undefined ? `${fullYear}-` : ''}{dataMonth===undefined ? month : ''}{dataMonth}月</Button>
        </div>
      </div>
      
      {
        !!tongjisource?.order_count && <div className="site-card-wrapper">
          <Row gutter={16}>
            <Col span={8}>
              <Card title="订单总数" type="inner" >
                {tongjisource?.order_count}
              </Card>
            </Col>
            <Col span={8}>
              <Card title="订单吨数" type="inner" >
                {tongjisource?.oil_num}
              </Card>
            </Col>
            <Col span={8}>
              <Card title="订单金额" type="inner" >
                {tongjisource?.money}
              </Card>
            </Col>
          </Row>
        </div>
      }
      <Divider />
      {
        !!datePicker &&  <ConfigProvider locale={zh_CN}>
           <DatePicker  picker="month" open={true} disabledDate={(current)=>{ return current && current >moment().subtract( "month");}}
          onChange={(value, dateString) => {
            setDataMonth(dateString);
            setDatePicker(false);
          }}
          />
        </ConfigProvider>
      }
      <RangePicker onChange={(value, dateString) => { setDataTime(dateString) }} />
      <Table columns={columns} dataSource={datasource} pagination={false} rowKey={'id'} bordered={true} />
    </>
  )
}
export default Home;
